---
title: "Column Definitions"
---

{% if isFramework("javascript", "angular", "vue") %}
Each column in the grid is defined using a Column Definition (`ColDef`). Columns are positioned in the grid according to the order the Column Definitions are specified in the Grid Options.
{% /if %}

{% if isFramework("react") %}
{% videoSection id="aDCepyF_DUY" title="React Column Definitions" showHeader=true %}
Each column in the grid is defined using a Column Definition (`ColDef`). Columns are positioned in the grid according to the order the Column Definitions are specified in the Grid Options.
{% /videoSection %}
{% /if %}

{% gridExampleRunner title="Simple Definitions" name="simple" /%}

See [Column Properties](./column-properties/) for all available properties.

## Column Defaults {% #default-column-definitions %}

Use `defaultColDef` to set properties across ALL Columns.

{% gridExampleRunner title="Default Col Def" name="default-col-def" /%}

## Column Types

Use `columnTypes` to define a bunch of Column properties. The propeties are then applied to a Column using `type`.


```js {% frameworkTransform=true spaceBetweenProperties=true %}
const gridOptions = {
    columnTypes: {
        currency: { 
            width: 100,
            valueFormatter: CurrencyFormatter
        },
        dateTime: {
            width: 120,
            valueFormatter: DateTimeFormatter
        },
        shaded: {
            cellClass: 'shaded-class'
        }
    },
    columnDefs: [
        { field: 'productName'},

        // uses properties from dateTime type
        { field: 'lastSold', type: 'dateTime'},

        // uses properties from currency type
        { field: 'boughtPrice', type: 'currency'},

        // uses properties from currency AND shaded types
        { field: 'soldPrice', type: ['currency', 'shaded'] },
    ]
}
```

{% note %}
Column Types work on Columns only and not Column Groups.
{% /note %}

The below example shows Column Types.

{% gridExampleRunner title="Column Definition Example" name="column-definition" /%}

## Provided Column Types

The grid provides the Column Types `rightAligned` and `numericColumn`.
Both of these types right align the header and cells contents
by applying CSS classes `ag-right-aligned-header` to Column Headers and `ag-right-aligned-cell` to Cells.

```js {% frameworkTransform=true %}
const gridOptions = {
    columnDefs: [
        { headerName: 'Column A', field: 'a' },
        { headerName: 'Column B', field: 'b', type: 'rightAligned' },
        { headerName: 'Column C', field: 'c', type: 'numericColumn' },
    ]
}
```

## Column IDs

Each column generated by the grid is given a unique Column ID, which is used in parts of the Grid API.

If you are using the API and the column IDs are a little complex (e.g. if two columns have the same `field`, or if you are using `valueGetter` instead of `field`) then it is useful to understand how column IDs are generated.

If the user provides `colId` in the column definition, then this is used, otherwise the `field` is used. If both `colId` and `field` exist then `colId` gets preference. If neither `colId` nor `field` exists then a number is assigned. Finally, the ID is ensured to be unique by appending `'_n'` if necessary, where `n` is the first positive number that allows uniqueness.

In the example below, columns are set up to demonstrate the different ways IDs are generated. Open the example in a new tab and observe the output in the dev console. Note the following:

* Col 1 and Col 2 both use `colId`. The grid appends `'_1'` to Col 2 to make the ID unique.
* Col 3 and Col 4 both use `field`. The grid appends `'_1'` to Col 4 to make the ID unique.
* Col 5 and Col 6 have neither `colId` or `field` so the grid generates column IDs.

{% gridExampleRunner title="Column IDs" name="column-ids" /%}
